<%--
  Created by IntelliJ IDEA.
  User: taohj
  Date: 2015/1/7
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div title="&nbsp;&nbsp;聚类算法&nbsp;&nbsp; " data-options="closable:false" style="padding: 6px 6px 0 6px;">

  <div style="padding-left: 10px;border: 1px solid rgb(221,221,221);padding-top: 10px;  ">
    <div>聚类算法选择</div>
    <div style="min-height: 40px;padding: 6px">

      <div>
        <a class="easyui-linkbutton" style="width: 60px" name="clusterers_choose">选择</a>&nbsp;<input
              id="clusterers_choose_view_input" class="easyui-textbox" type="text"
              style="width: 600px;"/> <input name="clusterers_choose_classify_class" type="hidden"/>
      </div>


    </div>
  </div>



  <div style="height: 450px;padding-left: 0px;float: left;margin-top: 10px;">

    <div style="width: 240px;border: 1px solid  rgb(221,221,221);padding-bottom: 6px;">
      <div style="padding: 6px 0px 6px 10px;">测试选项</div>
      <div>
        <input type="radio"> 使用训练集 <br/>
        <input type="radio"> 供测试集 <br/>
        <input type="radio"> 使用部分作为训练集<br/>
        <input type="radio"> 评价 <br/>

        <select class="easyui-combobox" style="width: 220px;height: 26px;margin: 6px 0 6px 61px;" data-options="editable:false">
          <option>Nom</option>
        </select>


        <input type="checkbox"/> 可视化 <br/>



      </div>
    </div>

    <div style="padding:6px 0 6px 0;">
      <a class="easyui-linkbutton" style="width: 220px;margin-left: 8px;margin-top: 10px;">忽略属性</a>
    </div>

    <div style="padding: 0px 0 0 0;">
      <a id="clusterers_start_btn" class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">开始</a>
      <a class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">停止</a>
    </div>

    <div>
      <div style="padding: 6px 0 0 10px;height: 24px;">输出结果</div>
      <div>
        <input class="easyui-textbox" data-options="multiline:true,editable:false"
               style="width: 240px;height: 190px;">
      </div>
    </div>

  </div>

  <div style="width: 700px;float: right;border: 1px solid rgb(221,221,221);margin-top: 10px;padding: 4px">
    <div style="padding: 8px 0 0 10px;height: 24px;">分类器输出结果</div>
    <div>
      <input class="easyui-textbox" data-options="multiline:true,editable:false"
             id="clusterers_result_view_input"
             style="width: 100%;height: 400px;">

      <%--  <div  id="classify_result_view_input"
              style="width: 100%;height: 400px;border: 1px solid rgb(221,221,221)">

        </div>--%>


    </div>
  </div>


  <script>
    $(function () {
      var clusterTab=context.tabs.tabs("getTab","聚类算法");
       context.clusterTab=clusterTab;


      //聚类算法 算法选择按钮点击事件
      clusterTab.find("a[name=clusterers_choose]").on("click", function () {
        var dialog = $("<div><div></div></div>");
        var tree = dialog.find("div");
        dialog.dialog({
          title: '选择算法',
          width: 400,
          height: 400,
          closed: false,
          cache: false,
          modal: true,
          top: 120,
          buttons: [
            {
              text: '确定',
              handler: function () {
                var node = tree.tree("getSelected");
                clusterTab.find("input[name=clusterers_choose_classify_class]").val(node.id);
                var defalultParam = context.getDefalultParamsStr(clusterTab, node.id);
                clusterTab.find("#clusterers_choose_view_input").textbox("setValue", node.text + defalultParam);
                dialog.dialog("close");
              }
            },
            {
              text: '取消',
              handler: function () {
                dialog.dialog("close");
              }
            }
          ]
        });

        tree.tree({
          url: 'resources/js/data/clusterers.json'
        });

      });



      clusterTab.find("input[name=params]").closest("div").find("a:last-child").on('click',function(){
        var title=clusterTab.find("#clusterers_choose_view_input").textbox("getValue");
        var classes= clusterTab.find("input[name=clusterers_choose_classify_class]").val();
        context.viewdocs(clusterTab,title,classes);
      });








      // //聚类算法 开始按钮 点击事件
      clusterTab.find("#clusterers_start_btn").on("click", function () {

        var clusterers_result_view_input = clusterTab.find("#clusterers_result_view_input");
        clusterers_result_view_input.textbox("setValue", "");
        var clusterers = clusterTab.find("input[name=clusterers_choose_classify_class]").val();



        var viewValue = clusterTab.find("#clusterers_choose_view_input").textbox("getValue");
        var option = "";
        var index = viewValue.indexOf(" -");
        if (index > 1) {
          option = viewValue.substr(index);
        }

        $.post("clustererServlet", {action: "start", clusterers: clusterers,option:option}, function (data) {
          clusterers_result_view_input.textbox("setValue", data);
        });
      });



      $.get("resources/js/docs/clusterers.json", {}, function (data) {
        clusterTab.params=data;

        var viewInput = clusterTab.find("#clusterers_choose_view_input");
        var classInput=clusterTab.find("input[name=clusterers_choose_classify_class]");
        context.setParams(clusterTab,classInput,viewInput)
      },"json");



    });
  </script>

</div>
